<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="h3box">3333</h3>
    <h4 id="h4box">4444</h4>
    <script>
        //**创建一个元素
        var h1=document.createElement("h1");

        //创建一个文本节点---了解
        // var text=document.createTextNode("文本");
        // console.log(text);

        //**给标签添加内容
        h1.innerHTML="1111";
        // console.log(h1);

        //**给body添加子元素,追加到最后
        //document.body.appendChild(h1);

        //父节点.insertBefore(要插入的节点, 插在这个节点之前)---了解
        //h4 的前面插入 h1
       // document.body.insertBefore(h1,h4box);

        //cloneNode() 克隆 只克隆标签,里面的内容和样式都不会克隆---了解
        //cloneNode(true) 克隆  所有的都克隆
        // console.log(h4box.cloneNode());
        // console.log(h4box.cloneNode(true));

        //**删除某个元素
       // document.body.removeChild(h3box);


       //***元素添加属性

    //1.直接添加到元素对象上
    //    h3box.index=10;
    //    console.dir(h3box);

    //    delete  h3box.index;
    //    console.dir(h3box);

        //2.添加到标签上
        h3box.setAttribute("index",20);
        console.dir(h3box.getAttribute("index"));
        h3box.removeAttribute("index");
    </script>
</body>
</html>